<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>Elastic 常用代码生成工具</span>

      </div>
    </template>
    <div>
  <el-row>
    <el-col :span="24">
      <div class="main-body">
        <div class="grid-content bg-primary main-children ">
          <div class="left-body">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
              <el-tab-pane label="查询" name="first" class="tab-body">


                    <el-row>
                      <el-col :span="24">
                    <el-form :inline="true" :model="query" class="demo-form-inline">
                      <el-form-item label="查询字段">
                        <el-input v-model="query.field" placeholder="查询字段" />
                      </el-form-item>
                      <el-form-item label="搜索值">
                        <el-input v-model="query.value" placeholder="查询值" />
                      </el-form-item>
                      <el-form-item label="搜索方式">
                        <el-select v-model="query.type" placeholder="搜索方式">
                          <el-option label="精确查找" value="term" />
                          <el-option label="模糊搜索" value="wild" />
                          <el-option label="可分词模糊搜索" value="match" />
                        </el-select>
                      </el-form-item>
                      <el-form-item>
                        <el-button type="primary" @click="onSubmit">查看代码</el-button>
                      </el-form-item>
                    </el-form>


                      </el-col>
                    </el-row>

                  <el-row>
                    <el-col span="24">
                    JAVA代码
                    </el-col>
    </el-row>
                <el-row>
                    <el-col span="24">
                      <h5>精确查询</h5>  <br>
                      TermQueryBuilder termQueryBuilder = QueryBuilders.termQuery("{{ query.field }}","{{ query.value }}");<br>
                      rootQueryBuilder.must(termQueryBuilder);<br><br>
                      <h5>分词模糊查询</h5><br>
                      MatchQueryBuilder matchQueryBuilder = new MatchQueryBuilder("{{ query.field }}","{{ query.value }}");<br>
                      rootQueryBuilder.must(matchQueryBuilder);<br><br>
                      <h5>模糊查询 </h5>类似于sql like '%keyword%'<br>
                      WildcardQueryBuilder wildcardQueryBuilder =  QueryBuilders.wildcardQuery("{{ query.field }}","*{{ query.value }}*");<br>
                      rootQueryBuilder.must(wildcardQueryBuilder);<br>




                    </el-col>
                  </el-row>


              </el-tab-pane>
              <el-tab-pane label="聚合统计" name="second">
                <el-row>
                  <el-col span="24">
                     <el-form :inline="true" :model="aggr" class="demo-form-inline">
                     <el-form-item label="统计字段">
                       <el-input v-model="aggr.field" placeholder="统计字段" />
                     </el-form-item>
                      <el-form-item label="聚合名字">
                       <el-input v-model="aggr.name" placeholder="聚合桶名字" />
                      </el-form-item>
 
                    </el-form>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col span="24">
                    <h5>聚合代码</h5>  <br>
                    <div v-html="code" > </div>

                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="总数统计" name="third">Role</el-tab-pane>
              <el-tab-pane label="排序" name="fourth">Task</el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="24">
      <div class="grid-content bg-primary-light main-children"/>
    </el-col>
  </el-row>
    </div>
  </el-card>
</template>
<script>
import {reactive, ref} from "vue";

export default {
  name: 'MainBoard',
  components: {

  },
  setup(){
    const query = reactive({
      field:'name',
      value:'小明'
    })
    const aggr = reactive({
      field:'gender',
      name:'性别'
    })
    const type = ref('look')
    const code = ref(
        ''+
        '                    Map<String, Long> result = new HashMap<String, Long>();\n<br>' +
        '                    AggregationBuilder aggr = AggregationBuilders.terms("'+aggr.name+'").field("'+aggr.field+'");\n<br>' +
        '                    searchSourceBuilder.aggregation(aggr);\n<br>' +
        '                    SearchRequest searchRequest = new SearchRequest();\n<br>' +
        '                    searchRequest.source(searchSourceBuilder);\n<br>' +
        '                    searchRequest.indicesOptions(IndicesOptions.lenientExpandOpen());\n<br>' +
        '                    SearchResponse searchResponse = null;\n<br>' +
        '                    try {\n<br>' +
        '                     &nbsp; &nbsp;&nbsp; &nbsp;searchResponse = restHighLevelClient.search(searchRequest, RequestOptions.DEFAULT);\n<br>' +
        '                     &nbsp; &nbsp;&nbsp; &nbsp;Terms termResult = searchResponse.getAggregations().get("'+aggr.name+'");\n<br>' +
        '                     &nbsp; &nbsp;&nbsp; &nbsp;for (Terms.Bucket regionBucket : termResult.getBuckets()) {\n<br>' +
        '                     &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;String key = regionBucket.getKeyAsString();\n<br>' +
        '                     &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Long count = regionBucket.getDocCount();\n<br>' +
        '                      &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;result.put(key, count);\n<br>' +
        '                     &nbsp; &nbsp;&nbsp; &nbsp;}\n<br>' +
        '                    } catch (IOException e) {\n<br>' +
        '                      &nbsp; &nbsp; &nbsp; &nbsp;e.printStackTrace();\n<br>' +
        '                    }\n<br>' +
        '\n<br>');

    return {
      query,
      aggr,
      code,
      type

    }
  }
 }
</script>
<style scoped>
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.main-body {
  width: 100%;
  overflow: hidden;

}

.main-children {
  width: 98% !important;

  margin: 0 auto;
}

.left-body {
  width:98%;
  margin:0 auto;

}

 .sub-body div {
background-color: #fff  ;
  padding: 10px;
}

.el-col {
  border-radius: 4px;
}

.padding-4 {
  padding: 4px;
}

.bg-primary {
  background-color: #fff;
}

.bg-primary-light {
  background-color: var(--el-color-success-light-9);
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>